<template>
    <div class="left-bottom-container">
        <!-- 时间切换按钮 -->
        <!-- <div class="time-switch">
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'year' }" 
        @click="switchTimeType('year')"
      >
        年
      </div>
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'month' }" 
        @click="switchTimeType('month')"
      >
        月
      </div>
      <div 
        class="switch-btn" 
        :class="{ active: activeTimeType === 'day' }" 
        @click="switchTimeType('day')"
      >
        日
      </div>
    </div> -->

        <!-- 图表区域 -->
        <div class="chart-container">
            <v-chart class="chart" :option="chartOption" v-if="JSON.stringify(chartOption) !== '{}'" />
        </div>
        <div class="chart-container">
            <v-chart class="chart" :option="chartOption2" v-if="JSON.stringify(chartOption2) !== '{}'" />
        </div>
        <div class="chart-container">
            <v-chart class="chart" :option="chartOption3" v-if="JSON.stringify(chartOption3) !== '{}'" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { graphic } from 'echarts/core'

const activeTimeType = ref('day')
const chartOption = ref({})
const chartOption2 = ref({})
const chartOption3 = ref({})

// 接口数据
const loading = ref(false)

// 模拟数据
const mockData = reactive({
    year: {
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        yData: [85, 92, 78, 88, 95, 82, 90, 86, 93, 89, 96, 84]
    },
    month: {
        xData: ['01日', '02日', '03日', '04日', '05日', '06日', '07日', '08日', '09日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
        yData: [85, 78, 92, 89, 95, 97, 94, 96, 91, 88, 82, 79, 86, 93, 90, 87, 83, 95, 92, 88, 86, 91, 89, 94, 87, 93, 90, 85, 88, 92]
    },
    day: {
        xData: ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        yData: [88, 92, 85, 94, 96, 89, 93, 97, 91, 87, 90, 86, 95, 98, 92, 84, 89, 93, 87, 91, 95, 88, 90, 94]
    }
})



const switchTimeType = (type: string) => {
    activeTimeType.value = type
    updateChart()
}

// 更新第一个图表 - 弃电利用量
const updateChart1 = () => {
    const data = {
        xData: mockData['year'].xData,
        yData: mockData['year'].yData,
        totalUtilization: 85.6,
        avgEfficiency: 92.3
    }

    chartOption.value = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: 'rgba(124, 189, 207, 0.8)',
            textStyle: {
                color: '#ffffff'
            },
            formatter: function (params: any) {
                return `${params[0].name}<br/>${params[0].marker}发电量: ${params[0].value}kWh`
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data.xData,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            axisLabel: {
                color: '#7EB7FD',
                fontSize: 12
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '月发电量(kWh)',
            nameTextStyle: {
                color: '#7EB7FD',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            axisLabel: {
                color: '#7EB7FD',
                fontSize: 12
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(31, 99, 163, 0.2)'
                }
            }
        },
        series: [
            {
                name: '月发电量(kWh)',
                type: 'bar',
                data: data.yData,
                barWidth: '30%',
                itemStyle: {
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(0, 212, 255, 0.6)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0, 212, 255, 0.1)'
                        }
                    ]),
                    // color: new graphic.LinearGradient(0, 0, 0, 1, [
                    //   {
                    //     offset: 0,
                    //     color: '#7CBDCF'
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: '#5287DE'
                    //   }
                    // ]),
                    borderRadius: [4, 4, 0, 0]
                },
                emphasis: {
                    itemStyle: {
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#9DD4E6'
                            },
                            {
                                offset: 1,
                                color: '#72A7F5'
                            }
                        ])
                    }
                }
            }
        ]
    }
    // chartOption.value = {
    //   tooltip: {
    //     trigger: 'axis',
    //     backgroundColor: 'rgba(0, 0, 0, 0.8)',
    //     borderColor: 'rgba(124, 189, 207, 0.8)',
    //     textStyle: {
    //       color: '#ffffff'
    //     },
    //     formatter: function(params: any) {
    //       return `${params[0].name}<br/>${params[0].marker}发电量: ${params[0].value}kWh`
    //     }
    //   },
    //   grid: {
    //     left: '3%',
    //     right: '4%',
    //     bottom: '3%',
    //     top: '15%',
    //     containLabel: true
    //   },
    //   xAxis: {
    //     type: 'category',
    //     boundaryGap: false,
    //     data: currentData.xData,
    //     axisLine: {
    //       lineStyle: {
    //         color: 'rgba(255, 255, 255, 0.3)'
    //       }
    //     },
    //     axisLabel: {
    //       color: '#7EB7FD',
    //       fontSize: 12
    //     },
    //     splitLine: {
    //       show: true,
    //       lineStyle: {
    //         color: 'rgba(31, 99, 163, 0.2)'
    //       }
    //     }
    //   },
    //   yAxis: {
    //     type: 'value',
    //     name: '发电量(kWh)',
    //     nameTextStyle: {
    //       color: '#7EB7FD',
    //       fontSize: 12
    //     },
    //     axisLine: {
    //       lineStyle: {
    //         color: 'rgba(255, 255, 255, 0.3)'
    //       }
    //     },
    //     axisLabel: {
    //       color: '#7EB7FD',
    //       fontSize: 12
    //     },
    //     splitLine: {
    //       show: true,
    //       lineStyle: {
    //         color: 'rgba(31, 99, 163, 0.2)'
    //       }
    //     }
    //   },
    //   series: [
    //     {
    //       name: '发电量',
    //       type: 'line',
    //       smooth: true,
    //       symbol: 'circle',
    //       symbolSize: 6,
    //       data: currentData.yData,
    //       lineStyle: {
    //         color: '#00d4ff',
    //         width: 3
    //       },
    //       itemStyle: {
    //         color: '#00d4ff',
    //         shadowColor: '#00d4ff',
    //         shadowBlur: 10
    //       },
    //       areaStyle: {
    //         color: new graphic.LinearGradient(0, 0, 0, 1, [
    //           {
    //             offset: 0,
    //             color: 'rgba(0, 212, 255, 0.6)'
    //           },
    //           {
    //             offset: 1,
    //             color: 'rgba(0, 212, 255, 0.1)'
    //           }
    //         ])
    //       }
    //     }
    //   ]
    // }
}

// 更新第二个图表 - 弃电接收量
const updateChart2 = () => {
    const data = {
        xData: mockData['month'].xData,
        yData: mockData['month'].yData,
        totalReceive: 76.8,
        avgUtilization: 88.5
    }

    // 柱状图
    // chartOption2.value = {
    //     tooltip: {
    //         trigger: 'axis',
    //         backgroundColor: 'rgba(0, 0, 0, 0.8)',
    //         borderColor: 'rgba(124, 189, 207, 0.8)',
    //         textStyle: {
    //             color: '#ffffff'
    //         },
    //         formatter: function (params: any) {
    //             return `${params[0].name}<br/>${params[0].marker}发电量: ${params[0].value}kWh`
    //         }
    //     },
    //     grid: {
    //         left: '3%',
    //         right: '4%',
    //         bottom: '3%',
    //         top: '15%',
    //         containLabel: true
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: data.xData,
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255, 255, 255, 0.3)'
    //             }
    //         },
    //         axisLabel: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         splitLine: {
    //             show: false
    //         }
    //     },
    //     yAxis: {
    //         type: 'value',
    //         name: '弃电接收量(kWh)',
    //         nameTextStyle: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255, 255, 255, 0.3)'
    //             }
    //         },
    //         axisLabel: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         splitLine: {
    //             show: true,
    //             lineStyle: {
    //                 color: 'rgba(31, 99, 163, 0.2)'
    //             }
    //         }
    //     },
    //     series: [
    //         {
    //             name: '弃电接收量(kWh)',
    //             type: 'bar',
    //             data: data.yData,
    //             barWidth: '60%',
    //             itemStyle: {
    //                 color: new graphic.LinearGradient(0, 0, 0, 1, [
    //                     {
    //                         offset: 0,
    //                         color: 'rgba(0, 212, 255, 0.6)'
    //                     },
    //                     {
    //                         offset: 1,
    //                         color: 'rgba(0, 212, 255, 0.1)'
    //                     }
    //                 ]),
    //                 borderRadius: [4, 4, 0, 0]
    //             },
    //             emphasis: {
    //                 itemStyle: {
    //                     color: new graphic.LinearGradient(0, 0, 0, 1, [
    //                         {
    //                             offset: 0,
    //                             color: '#9DD4E6'
    //                         },
    //                         {
    //                             offset: 1,
    //                             color: '#72A7F5'
    //                         }
    //                     ])
    //                 }
    //             }
    //         }
    //     ]
    // }

    // 折线图
    chartOption2.value = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: 'rgba(124, 189, 207, 0.8)',
        textStyle: {
          color: '#ffffff'
        },
        formatter: function(params: any) {
          return `${params[0].name}<br/>${params[0].marker}日发电量: ${params[0].value}kWh`
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.xData,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisLabel: {
          color: '#7EB7FD',
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(31, 99, 163, 0.2)'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: '日发电量(kWh)',
        nameTextStyle: {
          color: '#7EB7FD',
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisLabel: {
          color: '#7EB7FD',
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(31, 99, 163, 0.2)'
          }
        }
      },
      series: [
        {
          name: '日发电量',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          data: data.yData,
          lineStyle: {
            color: '#00d4ff',
            width: 3
          },
          itemStyle: {
            color: '#00d4ff',
            shadowColor: '#00d4ff',
            shadowBlur: 10
          },
          areaStyle: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0, 212, 255, 0.6)'
              },
              {
                offset: 1,
                color: 'rgba(0, 212, 255, 0.1)'
              }
            ])
          }
        }
      ]
    }
}

// 更新第三个图表 - 发电柱图
const updateChart3 = () => {
    const data = {
        xData: mockData['day'].xData,
        yData: mockData['day'].yData,
        totalGeneration: 1250.8,
        peakPower: 98.5
    }

    // 发电柱图
    // chartOption3.value = {
    //     tooltip: {
    //         trigger: 'axis',
    //         backgroundColor: 'rgba(0, 0, 0, 0.8)',
    //         borderColor: 'rgba(124, 189, 207, 0.8)',
    //         textStyle: {
    //             color: '#ffffff'
    //         },
    //         formatter: function (params: any) {
    //             return `${params[0].name}<br/>${params[0].marker}发电量: ${params[0].value}kWh`
    //         }
    //     },
    //     grid: {
    //         left: '3%',
    //         right: '4%',
    //         bottom: '3%',
    //         top: '15%',
    //         containLabel: true
    //     },
    //     xAxis: {
    //         type: 'category',
    //         data: data.xData,
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255, 255, 255, 0.3)'
    //             }
    //         },
    //         axisLabel: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         splitLine: {
    //             show: false
    //         }
    //     },
    //     yAxis: {
    //         type: 'value',
    //         name: '发电量(kWh)',
    //         nameTextStyle: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         axisLine: {
    //             lineStyle: {
    //                 color: 'rgba(255, 255, 255, 0.3)'
    //             }
    //         },
    //         axisLabel: {
    //             color: '#7EB7FD',
    //             fontSize: 12
    //         },
    //         splitLine: {
    //             show: true,
    //             lineStyle: {
    //                 color: 'rgba(31, 99, 163, 0.2)'
    //             }
    //         }
    //     },
    //     series: [
    //         {
    //             name: '发电量(kWh)',
    //             type: 'bar',
    //             data: data.yData,
    //             barWidth: '60%',
    //             itemStyle: {
    //                 color: new graphic.LinearGradient(0, 0, 0, 1, [
    //                     {
    //                         offset: 0,
    //                         color: 'rgba(0, 212, 255, 0.6)'
    //                     },
    //                     {
    //                         offset: 1,
    //                         color: 'rgba(0, 212, 255, 0.1)'
    //                     }
    //                 ]),
    //                 borderRadius: [4, 4, 0, 0]
    //             },
    //             emphasis: {
    //                 itemStyle: {
    //                     color: new graphic.LinearGradient(0, 0, 0, 1, [
    //                         {
    //                             offset: 0,
    //                             color: '#9DD4E6'
    //                         },
    //                         {
    //                             offset: 1,
    //                             color: '#72A7F5'
    //                         }
    //                     ])
    //                 }
    //             }
    //         }
    //     ]
    // }

    // 折线图
    chartOption3.value = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: 'rgba(124, 189, 207, 0.8)',
        textStyle: {
          color: '#ffffff'
        },
        formatter: function(params: any) {
          return `${params[0].name}<br/>${params[0].marker}小时发电量: ${params[0].value}kWh`
        }
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.xData,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisLabel: {
          color: '#7EB7FD',
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(31, 99, 163, 0.2)'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: '小时发电量(kWh)',
        nameTextStyle: {
          color: '#7EB7FD',
          fontSize: 12,
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisLabel: {
          color: '#7EB7FD',
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(31, 99, 163, 0.2)'
          }
        }
      },
      series: [
        {
          name: '小时发电量',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          data: data.yData,
          lineStyle: {
            color: '#00d4ff',
            width: 3
          },
          itemStyle: {
            color: '#00d4ff',
            shadowColor: '#00d4ff',
            shadowBlur: 10
          },
          areaStyle: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0, 212, 255, 0.6)'
              },
              {
                offset: 1,
                color: 'rgba(0, 212, 255, 0.1)'
              }
            ])
          }
        }
      ]
    }
}

const updateChart = () => {
    updateChart1()
    updateChart2()
    updateChart3()
}

const timer = ref()
onMounted(async () => {
    // 获取接口数据
    // await Promise.all([
    //     fetchAbandonedUtilizationData(),
    //     fetchAbandonedReceiveData(),
    //     fetchGenerationChartData()
    // ])
    
    // 如果接口数据获取失败，使用备用数据
    await nextTick(() => {
        timer.value = setTimeout(() => {
            updateChart()
            clearTimeout(timer.value)
        }, 1000)
    })
})

const init = (module: any) => {
    console.log(JSON.parse(module))
    let obj = JSON.parse(module)
    let list1: number[] = []
    let list2: number[] = []
    let list3: number[] = []

    obj.dailyData.forEach((item: any, index: number) => {
        list1.push(item.value)
    })
    mockData.day.yData = list1

    obj.monthlyData.forEach((item: any) => {
        list2.push(item.value)
    })
    mockData.month.yData = list2

    obj.yearlyData.forEach((item: any) => {
        list3.push(item.value)
    })

    mockData.year.yData = list3


}

const upData = (module: any) => {
    console.log(JSON.parse(module))
    let obj = JSON.parse(module)
    let list1: number[] = []
    let list2: number[] = []
    let list3: number[] = []

    obj.dailyData.forEach((item: any) => {
        list1.push(item.value)
    })
    mockData.day.yData = list1

    obj.monthlyData.forEach((item: any) => {
        list2.push(item.value)
    })
    mockData.month.yData = list2

    obj.yearlyData.forEach((item: any) => {
        list3.push(item.value)
    })

    mockData.year.yData = list3

    updateChart()
}

defineExpose({
    init,
    upData
})

</script>

<style lang="less" scoped>
.left-bottom-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

.time-switch {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    background: rgba(0, 30, 60, 0.6);
    border-radius: 20px;
    padding: 4px;

    .switch-btn {
        padding: 6px 16px;
        margin: 0 2px;
        border-radius: 16px;
        color: #7EB7FD;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background: rgba(0, 212, 255, 0.2);
            color: #00d4ff;
        }

        &.active {
            background: linear-gradient(90deg, #00d4ff 0%, #0099cc 100%);
            color: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 212, 255, 0.4);
        }
    }
}

.chart-container {
    flex: 1;

    .chart {
        width: 100%;
        // min-height: 300px;
        height: 100%;

        :deep(.vue-echarts-inner) {
            div:nth-child(1) {
                height: 100% !important;
            }
        }
    }
}
</style>